<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>循环精灵图</title>
		<script type="text/javascript" src="../../js/jquery-3.2.1.min.js" ></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style-type: none;
			}
			
			.box{
				width: 250px;
				margin: 100px auto ;
			}
			
			.box li{
				float:  left;
				width: 24px;
				height: 24px;
				background-color: pink;
				margin: 15px;
				background: url(images/sprite.png)) no-repeat;
			}
		
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li></li>	
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>	
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				
			</ul>
			
		</div>
	</body>
	<script>
		$("ul").each(function(){
			//console.log($(this).find('li'));
			$(this).find('li').each(function(){
				$(this).mouseenter(function(){
					$(this).css('background-color','blue');
				});
				$(this).mouseleave(function(){
					$(this).css('background-color','pink');
				});
			})
		})
		
	</script>
</html>
